<template>
	<view style="height: 100%;">
		<!--    <law-top-nav :title="title"></law-top-nav>-->
		<!-- 导航栏 -->
		<shopro-navbar :isBack="true" :isOrder="isOrder" :backIconColor="'#000'">
			<view class="head_box" slot="content">
				{{ title }}
			</view>
		</shopro-navbar>
		<view class="login-wrap form-wrap" style="height: 100%;">
			<!-- 1.账号密码登录 -->
			<view v-if="authType === 'accountLogin'">
				<!-- 标题 -->
				<view class="form-item  u-border-bottom ">
					<view class="item-content u-flex u-col-center">
						<u-input class="u-m-r-10 u-flex-1" placeholder="请输入手机号" @blur="checkValue($event, 'account')"
							@input="checkValue($event, 'account')" :placeholderStyle="placeholderStyle"
							v-model="form['accountLogin'].data.account" type="text"></u-input>
						<button class="u-reset-button forgot-btn" @tap="showAuthModal('smsLogin')">验证码登录</button>
					</view>
					<view class="message-error">{{ form['accountLogin'].error.account || '' }}</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<u-input class="u-m-r-10 u-flex-1" placeholder="请输入密码" :placeholderStyle="placeholderStyle"
							v-model="form['accountLogin'].data.password" type="password"
							@blur="checkValue($event, 'password')" @input="checkValue($event, 'password')"></u-input>

					</view>
					<view class="message-error">{{ form['accountLogin'].error.password || '' }}</view>
				</view>
				<button class="u-reset-button login-btn-start seckill-btn" @tap="accountLoginSubmit">登录</button>
			</view>

			<!-- 2.短信登录 -->
			<view v-if="authType === 'smsLogin'">
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<u-input class="u-m-r-10 u-flex-1" placeholder="请输入手机号" @blur="checkValue($event, 'mobile')"
							@input="mobileInput($event, 'mobile')" :placeholderStyle="placeholderStyle"
							v-model="form['smsLogin'].data.mobile" type="number"></u-input>

					</view>
					<view class="message-error">{{ form['smsLogin'].error.mobile || '' }}</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<u-input class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'code')"
							@input="checkValue($event, 'code')" placeholder="请输入验证码"
							:placeholderStyle="placeholderStyle" v-model="form['smsLogin'].data.code"
							type="number"></u-input>
						<button class="u-reset-button code-btn code-btn-start"
							:disabled="!form['smsLogin'].data.isMobileEnd"
							:class="{ 'code-btn-end': form['smsLogin'].data.isMobileEnd }"
							@tap="getSmsCode('mobilelogin')">
							{{ codeText }}
						</button>
					</view>
					<view class="message-error">{{ form['smsLogin'].error.code || '' }}</view>
				</view>
				<button class="u-reset-button login-btn-start seckill-btn" @tap="smsLoginSubmit">登录</button>
				<!--        <button class="u-reset-button type-btn" @tap="showAuthModal('register')">立即注册</button>-->
			</view>

			<!-- 3.注册 -->
			<view v-if="authType === 'register'">
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<u-input class="u-m-r-10 u-flex-1" placeholder="请输入手机号" @blur="checkValue($event, 'mobile')"
							@input="mobileInput($event, 'mobile')" :placeholderStyle="placeholderStyle"
							v-model="form['register'].data.mobile" type="number"></u-input>
					</view>
					<view class="message-error">{{ form['register'].error.mobile || '' }}</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<u-input class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'password')"
							@input="checkValue($event, 'password')" placeholder="请输入密码"
							:placeholderStyle="placeholderStyle" v-model="form['register'].data.password"
							type="password"></u-input>
					</view>
					<view class="message-error">{{ form['register'].error.password || '' }}</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<u-input class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'code')"
							@input="checkValue($event, 'code')" placeholder="请输入验证码"
							:placeholderStyle="placeholderStyle" v-model="form['register'].data.code"
							type="number"></u-input>
						<button class="u-reset-button code-btn code-btn-start border-none"
							:disabled="!form['register'].data.isMobileEnd"
							:class="{ 'code-btn-end': form['register'].data.isMobileEnd }"
							@tap="getSmsCode('register')">
							{{ codeText }}
						</button>
					</view>
					<view class="message-error">{{ form['register'].error.code || '' }}</view>
				</view>
				<button class="u-reset-button login-btn-start seckill-btn" @tap="registerSubmit">注册</button>
			</view>

			<!-- 4.忘记密码 -->
			<view v-if="authType === 'forgotPwd'">
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<u-input class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'mobile')"
							@input="mobileInput($event, 'mobile')" placeholder="请输入手机号"
							:placeholderStyle="placeholderStyle" v-model="form['forgotPwd'].data.mobile"
							type="number"></u-input>
					</view>
					<view class="message-error">{{ form['forgotPwd'].error.mobile || '' }}</view>
				</view>

				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<u-input class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'code')"
							@input="checkValue($event, 'code')" placeholder="请输入验证码"
							:placeholderStyle="placeholderStyle" v-model="form['forgotPwd'].data.code"
							type="number"></u-input>
						<button class="u-reset-button code-btn code-btn-start border-none"
							:disabled="!form['forgotPwd'].data.isMobileEnd"
							:class="{ 'code-btn-end': form['forgotPwd'].data.isMobileEnd }"
							@tap="getSmsCode('resetpwd')">
							{{ codeText }}
						</button>
					</view>
					<view class="message-error">{{ form['forgotPwd'].error.code || '' }}</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<u-input class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'newPassword')"
							@input="checkValue($event, 'newPassword')" placeholder="设置新密码"
							:placeholderStyle="placeholderStyle" v-model="form['forgotPwd'].data.newPassword"
							type="password"></u-input>
					</view>
					<view class="message-error">{{ form['forgotPwd'].error.newPassword || '' }}</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<u-input class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'reNewPassword')"
							@input="checkValue($event, 'reNewPassword')" placeholder="确认新密码"
							:placeholderStyle="placeholderStyle" v-model="form['forgotPwd'].data.reNewPassword"
							type="password"></u-input>
					</view>
					<view class="message-error">{{ form['forgotPwd'].error.reNewPassword || '' }}</view>
				</view>
			</view>
			<!-- 第三方登录 -->
			<view v-if="authType == 'toLogin'" class="auto-login-box u-flex u-row-center u-col-center">
				<!-- 微信 :src="$IMG_URL + '/imgs/auto_login_iphone.png'"   <text @click.stop="phone_login('accountLogin')">账号登录/</text>-->
				<view class="login-center">
					<image class="auto-login-img login-img" src="https://d-duomi.bigchun.com/images/logo.jpg"></image>
					<text class="title">商帮惠选欢迎您</text>
					<button v-if="!protocol" class="seckill-btn" @click="clickagree()">微信用户一键登录</button>
					<button v-else @click="thirdLogin('wechat')" class="seckill-btn">微信用户一键登录</button>
					<!--<text @click.stop="phone_login('register')">/注册</text>-->
					<view class="gray u-font-sm">请选择<text @click.stop="phone_login('smsLogin')">手机号登录</text></view>
				</view>
			</view>

			<!-- 没有账号去注册提示 -->
			<view v-if="['accountLogin', 'forgotPwd', 'register'].includes(authType)" class=" u-flex u-row-between">
				<view class="agreement-text u-flex u-col-center text-red" v-if="authType == 'accountLogin'"
					@click.stop="phone_login('forgotPwd')">
					忘记密码？
				</view>
				<view class="agreement-text u-flex u-col-center gray" v-if="authType == 'accountLogin'"
					@click.stop="phone_login('register')">
					暂无账号， 去注册
				</view>
				<view class="agreement-text u-flex u-col-center gray" v-if="authType != 'accountLogin'">
				</view>
				<view class="agreement-text u-flex u-col-center gray" :class="authType == 'forgotPwd'?'u-m-t-40':''"
					v-if="authType != 'accountLogin'" @click.stop="phone_login('accountLogin')">
					有账号， 去登录
				</view>
			</view>
		</view>
		<!-- 协议 -->
		<view v-if="['accountLogin','toLogin','toLogins'].includes(authType)"
			class=" u-flex u-row-center agreement-box">
			<u-checkbox v-model="protocol" shape="circle" active-color="#FC5351">
				<view class="agreement-text u-flex u-col-center">
					选中登录代表您已同意
					<view class="tcp-text u-flex u-col-center">
						<view
							@tap.stop="$Router.push({ path: '/pages/public/richtext', query: { id: initShop.user_protocol || 0 } })">
							《用户服务协议》</view>
						<!--              与-->
						<!--              <view @tap.stop="$Router.push({ path: '/pages/public/richtext', query: { id: initShop.privacy_protocol || 0 } })">《隐私协议》</view>-->
					</view>
				</view>
			</u-checkbox>
		</view>
		<u-popup closeable v-model="bindmobille" mode="center" @close="close" @open="open" width="612rpx">
			<view class="notice-modal">
				<image class="auto-login-img login-img" src="https://d-duomi.bigchun.com/images/logo.jpg"></image>
				<text class="title">商帮惠选欢迎您</text>
				<button class="seckill-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键绑定手机号</button>
			</view>
		</u-popup>
	</view>
	</view>
</template>

<script>
	/**
	 * 登录提示页
	 */
	import FormValidate from '@/shopro/validate/form';
	import schema from '@/uview-ui/libs/util/async-validator';
	import wechat from '@/shopro/wechat/wechat';
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	// #ifdef APP-PLUS
	import apple from '@/shopro/apple';
	// #endif

	export default {
		name: 'shoproAuthModal',
		data() {
			return {
				isOrder: '1',
				title: '登录',
				platform: "",
				device: "",
				bindmobille: false,
				tokens: '',
				form: {
					// 1.账号密码登录
					accountLogin: {
						data: {
							account: '', // 账号
							password: '' // 密码
						},
						rules: {
							account: FormValidate.account,
							password: FormValidate.password
						},
						error: {
							account: '',
							password: ''
						}
					},

					// 2.短信登录
					smsLogin: {
						data: {
							mobile: '', // 手机号
							code: '', // 验证码
							isMobileEnd: false // 手机号输入完毕
						},
						rules: {
							code: FormValidate.code,
							mobile: FormValidate.mobile
						},
						error: {
							mobile: '', // 手机号
							code: '' // 验证码
						}
					},
					// 3.注册
					register: {
						data: {
							mobile: '', // 手机号
							code: '', // 验证码
							password: '', // 密码
							isMobileEnd: false // 手机号输入完毕
						},
						rules: {
							code: FormValidate.code,
							mobile: FormValidate.mobile,
							password: FormValidate.password
						},
						error: {
							mobile: '', // 手机号
							code: '', // 验证码
							password: '' // 密码
						}
					},

					// 4.忘记密码//改密码
					forgotPwd: {
						data: {
							mobile: '', //手机号
							code: '', //验证码
							newPassword: '', //新密码
							reNewPassword: '', //确认密码
							isMobileEnd: false, // 手机号输入完毕
						},
						rules: {
							mobile: FormValidate.mobile,
							code: FormValidate.code,
							newPassword: FormValidate.password,
							reNewPassword: [{
									required: true,
									message: '请重新输入密码',
									trigger: ['change', 'blur']
								},
								{
									validator: (rule, value, callback) => {
										return value === this.form.forgotPwd.data.newPassword;
									},
									message: '两次输入的密码不一致',
									trigger: ['change', 'blur']
								}
							]
						},
						error: {
							mobile: '', //手机号
							code: '', //验证码
							newPassword: '', //新密码
							reNewPassword: '' //确认密码
						}
					},

				},
				codeText: '获取验证码',
				disabledCode: false,
				protocol: false, //是否同意隐私协议
				placeholderStyle: 'font-size: 30rpx; font-weight: 500;color:#C2C7CF;',
				redirected: ''
			};
		},

		computed: {
			...mapGetters(['initShop', 'isLogin', 'authType']),
			showAuth: {
				get() {
					return !!this.authType;
				},
				set(value) {
					value ? uni.hideTabBar() : uni.showTabBar();
				}
			}
		},
		mounted() {
			var that = this;
			that.$nextTick(() => {
				this.platform = this.$platform.get();
				this.device = this.$platform.device();
				this.redirected = this.$Route.query.redirected;
			})
			if (this.$Route.query.code) {
				uni.setStorageSync('wechatcode', this.$Route.query.code)
				this.$store.dispatch('showAuthModal', 'smsLogin');
			} else {
				this.$store.dispatch('showAuthModal', 'toLogin');
			}
		},
		created() {
			// this.$nextTick(()=>{
			//   console.log("======authType111",this.authType)
			//   this.$store.dispatch('showAuthModal','toLogins');
			// })
			// console.log("======authType222",this.authType)
		},
		watch: {
			authType(val) {
				if (val == 'smsLogin') {
					this.title = '手机号登录';
					this.isOrder = '2'
				}
				if (val == 'register') {
					this.title = '注册';
					this.isOrder = '2'
				}
				if (val == 'accountLogin') {
					this.title = '账号登录';
					this.isOrder = '2'
				}
				if (val == 'forgotPwd') {
					this.title = '忘记密码';
					this.isOrder = '2'
				}
				if (val == 'toLogin') {
					this.title = '登录';
					this.isOrder = '1'
				}
			}
		},
		methods: {
			...mapActions(['getUserInfo', 'showAuthModal']),
			open() {
				// console.log('open');
			},
			close() {
				this.bindmobille = false
				// console.log('close');
			},
			phone_login(type) {
				if (type == 'smsLogin') {
					// this.$store.dispatch('showAuthModal', 'smsLogin');
					let redirect_uri = encodeURIComponent(
						`https://d-duomi.bigchun.com/#/pages/index/login?authType=smsLogin`);
					let oauthUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + this.$store.getters
						.initWechat.appid +
						`&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_base&state=1`;
					window.location = oauthUrl;
				}
				if (type == 'register') {
					this.$store.dispatch('showAuthModal', 'register');
				}
				if (type == 'accountLogin') {
					this.$store.dispatch('showAuthModal', 'accountLogin');
				}
				if (type == 'forgotPwd') {
					this.$store.dispatch('showAuthModal', 'forgotPwd');
				}
				if (type == "changePwd") {
					this.$store.dispatch('showAuthModal', 'changePwd');
				}
			},
			// 检测
			checkValue(e, key) {
				this.validation(key);
			},

			// 校验数据
			validation(key, callback = () => {}) {
				let that = this;
				//拿到需要校验的数据
				let fieldValue = this.form[this.authType].data[key];
				//拿到需要检验的规则
				let rules = this.form[this.authType].rules[key];
				// 判空
				if (!rules || rules.length === 0) {
					return callback('');
				}
				// 设置当前的装填，标识为校验中
				let validateState = 'validating';
				// 调用async-validator的方法
				let validator = new schema({
					[key]: rules
				});
				// 校验
				validator.validate({
						[key]: fieldValue
					}, {
						firstFields: true
					},
					(errors, fields) => {
						// 记录状态和报错信息
						validateState = !errors ? 'success' : 'error';
						let validateMessage = errors ? errors[0].message : '';
						that.form[that.authType].error[key] = validateMessage;
						callback(validateMessage);
					}
				);
			},

			// 校验全部数据
			validateAll(callback) {
				let that = this;
				return new Promise(resolve => {
					// 对当前所有表单检验
					let valid = true; // 默认通过
					let count = 0; // 用于标记是否检查完毕
					let errorArr = []; // 存放错误信息
					let curFormData = that.form[that.authType].data;
					Object.keys(curFormData).map(field => {
						that.validation(field, error => {
							// 如果回调有error
							if (error) {
								valid = false;
								errorArr.push(error);
							}
							if (++count === Object.keys(curFormData).length) {
								resolve(valid);
								if (errorArr.length) {
									this.$u.toast(errorArr[0]);
								}
								if (typeof callback == 'function') callback(valid);
							}
						});
					});
				});
			},

			// 手机号是否输入完毕
			mobileInput(e, key) {
				this.form[this.authType].data.isMobileEnd = this.$u.test.mobile(this.form[this.authType].data.mobile);
				this.validation(key);
			},

			closeAuthModal() {
				this.$store.dispatch('showAuthModal', '');
			},

			// 获取短信验证码
			getSmsCode(type) {
				const that = this;
				if (that.form[this.authType].data.isMobileEnd && !that.disabledCode) {
					that.$https(
						'common.smsSend', {
							mobile: that.form[this.authType].data.mobile,
							event: type
						},
						'获取验证码中...'
					).then(res => {
						if (res.code === 1) {
							that.codeChange();
							that.$u.toast('验证码已发送，请注意查收短信');
						} else {
							that.$u.toast(res.msg);
						}
					});
				} else {
					that.$u.toast('请稍后再试');
				}
			},

			// 倒计时
			codeChange() {
				if (this.disabledCode) return;
				this.disabledCode = true;
				let n = 60;
				this.codeText = n + 's';
				const run = setInterval(() => {
					n -= 1;
					if (n < 0) {
						clearInterval(run);
					}
					this.codeText = n + 's';
					if (this.codeText < 0 + 's') {
						this.disabledCode = false;
						this.codeText = '重新获取';
					}
				}, 1000);
			},

			// 规则校验
			validateSubmit() {
				if (['accountLogin', 'register'].includes(this.authType) && !this.protocol) {
					this.$u.toast('请同意用户协议');
					return false;
				}
				return this.validateAll();
			},
			clickagree() {
				this.$u.toast('请同意用户协议');
			},
			async getPhoneNumber(e) {
				let res = e.detail;
				let that = this;
				if (res.errMsg === "getPhoneNumber:ok") {
					uni.showLoading({
						title: "登录中..."
					});
					await that.$https("user.wxMiniProgramOauth_bind", {
						session_key: uni.getStorageSync("session_key"),
						encryptedData: res.encryptedData,
						iv: res.iv,
						token: this.tokens,
						openid: uni.getStorageSync("openid"),
						store_shop_id: uni.getStorageSync("storeShopId")
					}).then(res => {
						if (res.code === 1) {
							uni.hideLoading();
							that.getUserInfo(res.data.userinfo);
							setTimeout(() => {
								uni.switchTab({
									url: "/pages/index/index"
								})
								that.closeAuthModal();
							}, 400)

						} else {
							that.$u.toast(res.msg);
						}
					});
				}
				return
			},
			// 第三方登录
			async thirdLogin(provider) {
				if (!this.protocol) {
					this.$u.toast('请同意用户协议');
					return false;
				}
				const that = this;
				let token = '';
				switch (provider) {
					case 'wechat':
						token = await wechat.login();
						break;
					case 'alipay':
						break;
					case 'apple':
						token = await apple.appleIdOauth();
						break;
					default:
						break;
				}
				token = uni.getStorageSync('token') || ''
				if (token) {
					this.tokens = token
					await this.$https('user.wxMiniProgramOauth_isbind', {
						token: token,
					}).then(res => {
						if (res.code === 1) {
							that.getUserInfo(token);
							setTimeout(() => {
								uni.switchTab({
									url: "/pages/index/index"
								})
								that.closeAuthModal();
							}, 400)
							// if (res.data.is_bind) {

							// } else {
							// 	this.bindmobille = true;
							// }
						}
					});

				}
			},

			// 1.账号登录
			async accountLoginSubmit() {
				let that = this;
				(await that.validateSubmit()) &&
				that
					.$http(
						'user.accountLogin', {
							account: that.form['accountLogin'].data.account,
							password: that.form['accountLogin'].data.password,
						},
						'登录中...'
					)
					.then(res => {
						if (res.code === 1) {
							that.closeAuthModal();
							that.getUserInfo(res.data);
							that.$u.toast(res.msg);
							uni.navigateBack({
								delta: 1
							});
						}
					});
			},

			// 2.短信登录
			async smsLoginSubmit() {
				let that = this;
				(await that.validateSubmit()) &&
				that.$https(
					'user.smsLogin', {
						mobile: that.form['smsLogin'].data.mobile,
						captcha: that.form['smsLogin'].data.code, //验证码
						// openid: uni.getStorageSync("openid"),
						wxcode: uni.getStorageSync("wechatcode"),
					},
					'登录中...'
				).then(res => {
					if (res.code === 1) {
						that.getUserInfo(res.data.userinfo.token);
						that.$u.toast(res.msg);
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/index/index"
							})
							that.closeAuthModal();
						}, 300)

					}
				});
			},

			// 3.注册
			async registerSubmit() {
				let that = this;
				(await that.validateSubmit()) &&
				that
					.$http(
						'user.register', {
							mobile: that.form['register'].data.mobile,
							code: that.form['register'].data.code,
							password: that.form['register'].data.password
						},
						'注册中...'
					)
					.then(res => {
						if (res.code === 1) {
							that.$u.toast(res.msg);
							that.closeAuthModal();
							that.getUserInfo(res.data.token);
							uni.navigateBack({
								delta: 1
							});
						}
					});
			},

		},
	};
</script>

<style lang="scss" scoped>
	@keyframes title-animation {
		0% {
			font-size: 32rpx;
		}

		100% {
			font-size: 36rpx;
		}
	}

	.head_box {
		width: 100%;
		text-align: center;
		font-weight: bold;
	}

	.form-wrap {
		.form-item {
			display: flex;
			flex-direction: column;
			font-size: 28rpx;
			padding: 20rpx 0;
			color: $u-main-color;
			box-sizing: border-box;
			line-height: $u-form-item-height;
			width: 100%;

			.item-title {
				width: 140rpx;
				font-size: 30rpx;
				color: #333;
				font-weight: 600;
				text-align: left;
			}

			.message-error {
				text-align: left;
				font-size: 24rpx;
				line-height: 24rpx;
				color: $u-type-error;
				margin-top: 12rpx;
			}
		}
	}

	.login-wrap {
		padding: 50rpx 34rpx;
		min-height: 700rpx;
		background-color: #fff;

		.head-box {
			.head-title {
				min-width: 160rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
				line-height: 36rpx;
			}

			.head-title-active {
				width: 160rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #999;
				line-height: 36rpx;
			}

			.head-title-animation {
				animation-name: title-animation;
				animation-duration: 0.1s;
				animation-timing-function: ease-out;
				animation-fill-mode: forwards;
			}

			.head-title-line {
				position: relative;

				&::before {
					content: '';
					width: 1rpx;
					height: 34rpx;
					background-color: #e4e7ed;
					position: absolute;
					left: -30rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			.head-subtitle {
				font-size: 26rpx;
				font-weight: 400;
				color: #c2c7cf;
				text-align: left;
				display: flex;
			}
		}

		.code-btn[disabled] {
			background-color: #fff;
		}

		.code-btn-start {
			width: 160rpx;
			line-height: 56rpx;
			border: 1rpx solid #FC5351;
			border-radius: 28rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #FC5351;
			opacity: 0.5;
		}

		.border-none {
			border: 0rpx solid #FC5351;
		}

		.forgot-btn {
			width: 160rpx;
			line-height: 56rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #999;
		}

		.code-btn-end {
			opacity: 1 !important;
		}

		.login-btn-start {
			//width: 158rpx;
			//line-height: 56rpx;
			//background: linear-gradient(90deg, #e9b461, #eecc89);
			//border-radius: 28rpx;
			//font-size: 26rpx;
			//font-weight: 500;
			//color: #ffffff;
			margin: 40rpx auto;
		}

		.type-btn {
			padding: 20rpx;
			margin: 40rpx auto;
			width: 200rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #999999;
		}

		.auto-login-box {
			width: 100%;
			height: 100%;

			.gray {
				color: #999999;
			}

			.u-m-t-40 {
				margin-top: 40rpx;
			}

			.auto-login-img {
				width: 120rpx;
				height: 120rpx;
				margin: 0 30rpx;
			}
		}
	}

	.tcp-text {
		color: #32b9ee;
	}

	.gray {
		color: #999999;
	}

	.login-center {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 50%;

		.login-img {
			width: 60rpx;
			height: 60rpx;
		}

		.title {
			margin-top: 50rpx;
			font-weight: bold;
			font-size: 32rpx;
		}

		.seckill-btn {
			width: 98%;
			line-height: 70rpx;
			color: #fff;
			background-color: #f56c6c;
			border-color: #f56c6c;
			font-size: 28rpx;
			font-weight: 500;
			border-radius: 10rpx;
			padding: 0;
			margin-top: 20%;
			margin-bottom: 30rpx;
		}
	}


	.seckill-btn {
		width: 98%;
		line-height: 70rpx;
		color: #fff;
		background-color: #f56c6c;
		border-color: #f56c6c;
		font-size: 28rpx;
		font-weight: 500;
		border-radius: 10rpx;
		padding: 0;
		margin-top: 20%;
		margin-bottom: 30rpx;
	}

	// 修改密码
	.editPwd-btn-box {
		.save-btn {
			width: 690rpx;
			line-height: 70rpx;
			background: linear-gradient(90deg, #e9b461, #eecc89);
			border-radius: 35rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
		}

		.forgot-btn {
			width: 690rpx;
			line-height: 70rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #999999;
		}
	}

	.agreement-box {
		position: fixed;
		bottom: 70rpx;
		width: 100%;
		margin: 80rpx auto 0;

		.protocol-check {
			transform: scale(0.7);
		}

		.agreement-text {
			font-size: 26rpx;
			font-weight: 500;
			color: #999999;

			.tcp-text {
				color: #32b9ee;
			}
		}
	}

	.notice-modal {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 612 rpx;
		min-height: 658 rpx;
		background: #ffffff;
		padding: 30 rpx;
		border-radius: 20 rpx;

		.seckill-btn {
			width: 612 rpx;
			margin-top: 50rpx;
		}

		.auto-login-img {
			width: 120rpx;
			height: 120rpx;
			margin: 92rpx 30rpx 30rpx;
		}
	}
</style>